import React, { Component } from 'react'
import { Form,Input,Button,Toast  } from 'antd-mobile'
import Header from '../../components/Header/Header'
import { reqlogin } from '../../http/api'

export default class Login extends Component {
  constructor(){
    super()
    this.state={
      user:{
        phone:"",
        password:"",
      }
    }
  }

  changeUser(e,key){
    this.setState({
      user:{
        ...this.state.user,
      [key]:e,
      }
    })
  }

  /* 点了登录 */
  login(){
    reqlogin(this.state.user).then((res)=>{
      if(res.data.code === 200){
        Toast.show({
          content:res.data.msg,
      })
      }
      /* 存数据 */
      sessionStorage.setItem("info",JSON.stringify(res.data.list));
      /* 跳页面 */
      this.props.history.push("/index/home")
    })
  }

  render() {
    return (
      <div className='login'>
        <Header text="登录" back></Header>
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='phone'>
            <Input placeholder='请输入手机号' clearable 
            onChange={e=>this.changeUser(e,"phone")}/>
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password'
            onChange={e=>this.changeUser(e,"password")} />
          </Form.Item>
          <Button block color='primary' size='large' onClick={()=>this.login()}>
          登录
        </Button>
        </Form>
      </div>
    )
  }
}
